// 导入基础包
import React, { useState, useEffect } from 'react'
import { connect, history } from 'umi'

// 导入处理函数
import * as tb from '../../methods/table'
import *as tags from '../../methods/tags'
import * as io from '../../methods/sockeio'
import * as xl from '../../methods/xlsx'
import * as date from '../../utils/date'


import { check_options } from '../../../config/data'

// 导入UI组件
import { Table, Pagination, Input, Select, Button, Divider, Checkbox } from 'antd';
// 导入样式文件
import css from './index.less';

const { Search } = Input
const { Option } = Select

const PageView = (props) => {
  const { global: state, dispatch } = props
  const [tmp, setTmp] = useState({});
  const [sotype, setSotype] = useState(state.sosuo_type[0].key)
  const [sovalue, setsovalue] = useState('')
  const [current, setCurrent] = useState(1);

  // 禁用默认事件
  useEffect(() => {
    window.onresize = () => {
      dispatch({ type: 'global/save', payload: { root_height: document.body.offsetHeight } })
    }
  })

  const table_cols = state.table_cols.map((tc, tid) => {
    return {
      ...tc,
      className: css.td,
      ellipsis: true,
      render: value => (
        // <Tooltip color="blue" title={(<h2>{value}</h2>)} placement="topLeft">
        typeof value === 'object' ?
          value.map((v, id) =>
            <p key={id}>{v}</p>
          )
          :
          <span>{value}</span>

        // </Tooltip>
      ),
    }
  })

  const rowSelection = {
    selectedRowKeys: state.srowkey,
    fixed: true,
    onChange: keys => {
      tags.rowSelection(keys, state, dispatch)
    },
  }

  const exp_xlsx = () => {
    var repeat_data = xl.format_list_all(state, dispatch)
    xl.export_xlsx(repeat_data, `${date.get_date2()}(导出).xlsx`)
  }


  const find_lists = (skip, sort) => {
    sort = sort || { _id: -1 }

    let query = state.sosuo_tiaojian
    emit({
      type: 'find',
      data: [
        config.list_db,
        { ...query },
        sort,
        (skip - 1) * state.limit,
        state.limit
      ]
    })
    // dispatch({ type: 'global/fetch', payload: { sosuo_tiaojian: query } })
  }

  return (
    <div>
      <div className={css.btn}>

        <Input.Group compact>
          <Button type="text">过滤条件</Button>
          <Checkbox.Group className={css.check} options={check_options} />
          <Divider type="vertical" />
          <Select
            style={{ width: '120px' }}
            defaultValue={state.sosuo_type[0].key}
            onSelect={e => setSotype(e)}
          >
            {state.sosuo_type.map((s, sid) =>
              <Option key={sid} value={s.key}>{s.title}</Option>
            )}
          </Select>
          <Search
            style={{ width: '250px' }}
            placeholder="请输入要搜索的内容"
            enterButton="搜索"
            onSearch={e => {
              setCurrent(1)
              setsovalue(e)
              tb.find_list(sotype, e, 1, { _id: -1 }, state, dispatch)
            }}
            allowClear
          />
          <Divider type="vertical" />
          <Button onClick={exp_xlsx}>导出表格文件</Button>
          <Divider type="vertical" />
          <Button onClick={() => { }}>打印表格</Button>
        </Input.Group>

      </div>


      <Table size="small" bordered
        columns={table_cols}
        dataSource={state.list_all}
        scroll={{ x: 2500, y: state.root_height - 230, scrollToFirstRowOnChange: true }}
        pagination={false}
        rowSelection={rowSelection}
        onRow={record => {
          return {
            onContextMenu: (e) => {
              e.preventDefault()
            },
            onDoubleClick: (e) => {
              e.preventDefault()
              io.get_file(record._id)
              history.push(`/file/${record._id}`)
            }
          }
        }}
      />
      <Pagination
        size="small"
        showQuickJumper
        defaultPageSize={50}
        current={current}
        showTotal={(total, range) => `档案总数：${total} / 当前显示：${range[0]}-${range[1]}`}
        onChange={e => {
          document.querySelector('.ant-table-body').scrollTop = 0
          setCurrent(e)
          tb.find_list(sotype, sovalue, e)
        }}
        total={state.list_count}
        showSizeChanger={true}
        pageSizeOptions={[10, 20, 50, 100, 200, 500]}
        onShowSizeChange={(current, size) => {
          console.log(current, size)
        }}
      />



    </div>
  );
}

export default connect(({ global, loading }) => ({ global, loading }))(PageView)